<template>
  <div id="role">

    <a-layout-header>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_list.png" alt="">
          <span>服务条款列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <a-button type="primary" icon="plus" @click="addClick">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>

    <a-layout-content>
      <a-table
          :columns="columns"
          :dataSource="dataTable"
          :rowKey="record => record.id"
          :loading="loading"
          :pagination="false"
          bordered>
        <template slot="action" slot-scope="text, record">
          <a-tag color="#933dfe" @click="editClick(record.id)">编辑</a-tag>
          <a-tag color="#f50" @click="delClick(record)">删除</a-tag>
        </template>
      </a-table>
    </a-layout-content>


    <a-modal
        class="modalWrap"
        @ok="oKAction"
        @cancel="handleCancel"
        :title="title + '服务条款'"
        :width="800"
        :visible="visible"
        :wrapStyle="{overflow: 'auto',paddingBottom: '108px'}"
    >
      <a-form :form="form">
        <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
              v-decorator="['title', { rules: [{required:true, message: '请输入条款标题'}] }]"
          ></a-input>
        </a-form-item>

        <a-form-item label="条款内容" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
              v-decorator="['content', { rules: [{required:true, message: '请输入条款内容'}] }]"
          ></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script>
import * as API from "../../api/tos";
import {preventMoreClick} from "@/utils/filter";

export default {
  name: "roles",
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      title: undefined,
      loading: false,
      id: undefined, // 抽屉id
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "id"}
        },
        {
          title: "条款标题",
          dataIndex: "title",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "title"}
        },
        {
          title: "条款内容",
          dataIndex: "content",
          width: "9%",
          align: "center",
          scopedSlots: {customRender: "content"}
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "action"}
        }
      ],
      dataTable: []
    };
  },
  mounted() {
    this.initTosList();
  },
  methods: {

    initTosList() {
      this.loading = true;
      API.getTosAll().then(res => {
        if (res.code === 200) {
          this.dataTable = res.data;
        }
        this.loading = false;
      });
    },

    addClick() {
      this.title = "新增";
      this.id = null;
      this.visible = true;
      this.form.resetFields();
    },

    editClick(id) {
      // 重置表单
      this.form.resetFields();
      this.title = "编辑"
      this.id = id;
      this.visible = true;
      this.loading = true
      API.getTosDetail(id).then(res => {
        if (res.code === 200) {
          let resp = res.data
          this.form.setFieldsValue({
            title: resp.title,
            content: resp.content,
          });
        }
      })
      this.loading = false
    },

    delClick(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        content: "确定删除该模板？",
        onOk() {
          let arr = [record.id]
          API.delTos(arr).then(res => {
            if (res.code === 200) {
              that.$message.success("删除成功");
              that.initTosList();
            }
          });
        }
      });
    },

    oKAction() {
      this.form.validateFields((err, formValue) => {
        if (!err) {
          // 防重复点击
          preventMoreClick(this, () => {
            if (this.id) {
              // 修改
              API.editTos(this.id, formValue).then(res => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.initTosList();
                  this.visible = false
                  this.id = null
                }
              })
            } else {
              API.addTos(formValue).then(res => {
                if (res.code === 200) {
                  this.$message.success("服务条款添加成功");
                  this.initTosList();
                  this.visible = false
                }
              })
            }
          })
        }
      });
    },
    handleCancel() {
      this.visible = false;
      this.id = undefined;
    }
  }
};
</script>

